<template>
  <el-dialog
    class="subject-status-add-record"
    title="行控制"
    width="1000px"
    :show-close="true"
    :visible.sync="rowVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div>
      <el-table
        :data="controlList"
        stripe
        style="width: 100%"
        size="mini"
        row-key="id"
        :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }"
        :tree-props="{ children: 'children' }"
      >
        <!-- 选择列 -->
        <el-table-column label="全选" align="center" width="80">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.rowSelectAll"
              @change="handleRowSelectChange($event, scope.row)"
            ></el-checkbox>
          </template>
        </el-table-column>
        <template v-for="(column, index) in tableColumns">
          <el-table-column
            v-if="column.visible"
            :key="column.name + '_' + index"
            :label="column.name"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="column.key === baseParams">
                <span>{{ scope.row.codeDescribe }}</span>
              </div>
              <span v-else>
                <el-checkbox
                  v-model="scope.row[column.key]"
                  @change="handleCellChange($event, scope.row)"
                ></el-checkbox>
              </span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSave">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  props: {
    rowData: Object,
    rowVisible: Boolean,
    searchParams: Object,
    tableColumns: Array,
    baseParams: String,
    controlList: Array,
    settingDiaSelectColumn: Array,
  },
  data() {
    return {}
  },
  watch: {
    rowVisible(val) {
      if (val) {
        this.controlList.map((cItem, cIndex) => {
          if (this.rowData.rowInlineControl) {
            this.rowData.rowInlineControl[cIndex][cItem.codeValue].map(rrItem => {
              cItem[rrItem] = true
            })
          }
        })
        //  设置行的全选按钮的值
        this.controlList.forEach(item => {
          let flag = true
          this.settingDiaSelectColumn.forEach(it => {
            if (!item[it]) {
              flag = false
            }
          })
          this.$set(item, 'rowSelectAll', flag)
        })
      }
    },
  },
  methods: {
    ...mapActions('eCRFDesign', ['qryDesignList', 'saveRowControlData']),

    // 单个单元格选择
    handleCellChange(val, row) {
      this.settingDiaSelectColumn.forEach(item => {
        let flag = true
        if (!row[item]) {
          flag = false
        }
        row.rowSelectAll = flag
      })
    },

    // 行选择
    handleRowSelectChange(val, row) {
      this.settingDiaSelectColumn.forEach(item => {
        row[item] = val
      })
    },

    // 关闭取消
    handleClose() {
      this.$emit('handleCancel', 'cancel')
    },

    // 保存
    handleSave() {
      const rowControlJson = []
      const rowInlineControl = []
      this.controlList.map((vItem, cIndex) => {
        const obj = {
          variable: vItem.variable,
          variableName: vItem.variableName,
          optName: vItem.codeDescribe,
          selectNames: [],
        }
        const obj1 = {
          [vItem.codeValue]: [],
        }
        this.tableColumns.map((tItem, tIndex) => {
          if (vItem[tItem.key] && tItem.key !== this.baseParams) {
            obj.selectNames.push(tItem.name)
            obj1[vItem.codeValue].push(tItem.key)
          }
        })
        rowControlJson.push(obj)
        rowInlineControl.push(obj1)
      })
      
      this.$emit('handleCancel', 'confirm', rowControlJson, rowInlineControl)
    },
  },
}
</script>
<style lang="scss" scoped></style>
